<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/26
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>

</head>
<body>
<%--查询start--%>
<%--<div class="layui-input-block">中的block表示单独一个模块（感觉像是div单独占一行的感觉）--%>
<div id="majorQueryFormDiv" width="800px">
    <form class="layui-form"  style="margin: 20px 10px"  id="majorQueryForm" >
        <div class="layui-input-inline">
            <label class="layui-form-label">专业名称</label>
            <div class="layui-input-inline">
               <%--下面的input标签中可以添加required  lay-verify="required"，表示该项不能为空--%>
                <input type="text" name="mname" id="mname"  placeholder="请输入专业名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">学院编号</label>
            <div class="layui-input-inline">
                <select name="cid" id="cid2" class="layui-input">
                    <option value="-1">----------------全部---------------</option>
                </select>
            </div>
        </div>

        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="majorQueryForm">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<%--查询end--%>
<button class="layui-btn layui-btn-warm layui-btn-radius" id="btn_add">增加一个员工</button>
<button class="layui-btn layui-btn-warm layui-btn-radius" id="btn_del">删除员工</button>
<%--majorForm begin--%>
<div id="majorFormDiv" style="display: none">
    <form class="layui-form"  style="margin: 20px 10px"  id="majorAddForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">专业名称</label>
            <div class="layui-input-block">
                <input type="text" name="mname" required  lay-verify="required" placeholder="请输入专业名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学分</label>
            <div class="layui-input-block">
                <input type="text" name="credit" required  lay-verify="required" placeholder="请输入学分" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学制</label>
            <div class="layui-input-block">
                <input type="text" name="lifeyear" required  lay-verify="required" placeholder="请输入学制" autocomplete="off" class="layui-input">
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学院编号</label>
                <div class="layui-input-block">
                    <select name="cid" id="cid" class="layui-input"></select>
                </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="majorForm">增加提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<%--majorForm end--%>
<%--修改--%>
<div id="majorUpdateFormDiv" style="display: none">
    <form class="layui-form"  style="margin: 20px 10px"  id="majorUpdateForm"  lay-filter="majorUpdateFormFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="hidden" name="mid" required   readonly lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专业名称</label>
            <div class="layui-input-block">
                <input type="text" name="mname" required  lay-verify="required" placeholder="请输入专业名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学分</label>
            <div class="layui-input-block">
                <input type="text" name="credit" required  lay-verify="required" placeholder="请输入学分" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学制</label>
            <div class="layui-input-block">
                <input type="text" name="lifeyear" required  lay-verify="required" placeholder="请输入学制" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学院编号</label>
            <div class="layui-input-block">
                <select name="cid" id="cid1" class="layui-input"></select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="majorUpdateForm">修改提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 表格的工具栏-->
<script type="text/html" id="toolbar1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- empForm end -->
<table id="majorTable" lay-filter="majorTableFilter"></table>

<script type="text/javascript">
    layui.use(["table","form"],function(){
        var  table=layui.table;
        var form=layui.form;
    form.on('submit(majorForm)',function (data) {
       /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
         console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
        $.ajax({
            type:"post",
            url:'major/save2',
           /* data:"mname="+data.field.mname+"&credit="+data.field.credit+"&lifeyear="
            +data.field.lifeyear+"&cid="+data.field.cid,*/
            data:$("#majorAddForm").serialize(),
            success:function(resp){
               /* 清空表单数据*/
                $("#majorAddForm")[0].reset();
                //关闭增加层弹框
                layer.closeAll();
                //表格刷新
                tabIns.reload({
                    page:true
                });
               layer.msg(resp.msg);

            },dataType:"json"
        });
        return false;

    });
    //生成表格
       var tabIns= table.render({
            elem:'#majorTable',
            url:'major/list',
            page:true,
            limit:3,
            limits:[3,5,7],
           //feild使对象的属性名
            cols:[[
                {checkbox:true},
                {field:'mid',title:'专业编号',width:177},
                {field:'mname',title:'专业名称',width:177},
                {field:'credit',title:'学分',width:177},
                {field:'lifeyear',title:'学制',width:177},
                {field:'cid',title:'学院编号',width:177},
                {fixed:'right',width:150,align:'center',toolbar:'#toolbar1'}
            ]]
        });
        //select下拉框初始化[cid,cname]
        $.ajax({
            type:'post',
            url:'college/list',
            dataType:'json',
            success:function(data){
                $.each(data,function(index,item){
                    //添加时的赋值
                    $("#cid").append(new Option(item.cname,item.cid)) ;
                    //修改时的赋值
                    $("#cid1").append(new Option(item.cname,item.cid));
                    //条件查询时的赋值
                    $("#cid2").append(new Option(item.cname,item.cid));
                })
                form.render('select')
            }
        });
        <%--给添加按钮添加一个点击事件--%>
        $("#btn_add").click(function(){

            //打开增加页面弹框
            layer.open({
                type:1,
                title:'增加员工',
                area:['500px','300px'],
                content:$("#majorFormDiv")
            });
        });
        //4.响应表格中toobar中的事件
        //监听程序 tool事件名称  obj使点击的该行的数据
        table.on('tool(majorTableFilter)',function(obj){
         //event代表点击的点击的按钮（区分是修改还是删除）
         //    console.info(obj.data.mid+","+obj.event)
            var id=obj.data.mid
          if (obj.event=='del'){//删除
              //1.将id传到后台，后台删除这个编号
              $.post('major/del/'+id,{},function(resp){
                  if (resp.code==0){
                      tabIns.reload({
                          page:true
                      })
                      layer.msg(resp.msg);
                  }
              },'json');
              //书信table
          }else {//修改
              $.post('major/find/'+id,{},function(resp){
                  form.val('majorUpdateFormFilter',{
                      mid:resp.mid,
                      mname:resp.mname,
                      credit:resp.credit,
                      lifeyear:resp.lifeyear,
                      cid:resp.cid
                  })
              },'json');
              layer.open({
                  type:1,
                  title:'修改员工信息',
                  area:['500px','300px'],
                  content:$("#majorUpdateFormDiv")
              });
          }
        })
        //5.完成数据修改
        form.on('submit(majorUpdateForm)',function (data) {
            /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
              console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
             console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
            $.ajax({
                type:"post",
                url:'major/update',
                /* data:"mname="+data.field.mname+"&credit="+data.field.credit+"&lifeyear="
                 +data.field.lifeyear+"&cid="+data.field.cid,*/
                data:$("#majorUpdateForm").serialize(),
                success:function(resp){
                    /* 清空表单数据*/
                    $("#majorUpdateForm")[0].reset();
                    //关闭增加层弹框
                    layer.closeAll();
                    //表格刷新
                    tabIns.reload({
                        page:true
                    });
                    layer.msg(resp.msg);

                },dataType:"json"
            });
            return false;

        });
        //6.批量删除
        $("#btn_del").click(function () {
            //1》取被选中的行
            var ids=[]//存储要被删除的行的编号
            //majorTable是idTest（示范模板的示例变量）是表格table的id值
            var checkStatus=table.checkStatus('majorTable')
            //checkStatus.data是所选数据的所有数据
          /* console.info(checkStatus.data)*/
            $.each(checkStatus.data,function (index, item) {
                ids.push(item.mid)
            })
            $.ajax({
                type:'post',
                url:'major/dels?ids='+ids,
                success:function (resp) {
                    tabIns.reload({
                        page:true
                    });
                    layer.msg(resp.msg);
                }
            })
        })
        //7.条件查询
        form.on('submit(majorQueryForm)',function(){
            //将表单的值（查询条件）提交控制器
            tabIns.reload({
                page:true,//查询第一页数据
                method:'post',
                where:{
                    mname:$("#mname").val(),
                    cid:$("#cid2").val()
                }
            })

            return false;
        })
    });

</script>
</body>
</html>
